<template>
  <el-row type="flex" justify="space-between" style="height: 100px;">
    <el-col v-for="(item, index) in itemdata" :key="index" :span="4" class="top_item" @click.native="toDetailPage(item)">
      <dv-border-box-13>
        <div class="box">
          <span class="value">
            <countTo :endVal="item.value" :startVal="startVal"  :duration="3000" />
          </span>
          <span class="title">{{ item.title }}</span>
        </div>
      </dv-border-box-13>
    </el-col>
  </el-row>
</template>

<script>
import { getAll } from '@/api/largeScreen.js'
import countTo from 'vue-count-to'

export default {
  components: { countTo },
  data() {
    return {
      itemdata: [
        { value: '', title: '用户数量', url: '/usermanage/userset' },
        { value: '', title: '主机数量', url: '/hosts' },
        { value: '', title: '进程总数', url: '/hosts/progress' },
        { value: '', title: '未解决报警', url: '/operation/operationfault' },
        { value: '', title: '工单总数', url: '/operation/operationfault' }
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await getAll()
      console.log('progressRes', res)
      this.itemdata[0].value = res.user
      this.itemdata[1].value = res.host
      this.itemdata[2].value = res.appInfo
      this.itemdata[3].value = res.faultNo
      this.itemdata[4].value = res.fault
    },
    toDetailPage(item) {
      console.log('item', item.url)
      this.$router.push(item.url)
    }
  }
}
</script>

<style lang="scss" scoped>
.top_item {
  user-select: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.top_item:hover {
  transform: translateY(-7px);
}
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

}

.value {
  color: #2A82E4;
  font-size: 32px;
  font-weight: bold;
}

.title {
  font-weight: bold;
  color: white;
}
</style>
